<template>
	<div class="cus-info">
		<info-item title="基本信息">
			<div class="info-item__content">
				<div>
					<label>头像：</label>
					<p>
						<cl-avatar class="avatar" :src="detail.cus_sex == 2 ? womenImg : menImg" />
					</p>
				</div>
				<div>
					<label>姓名：</label>
					<p>{{ detail.cus_name || "-" }}</p>
				</div>
				<div>
					<label>手机号：</label>
					<p>{{ detail.cus_mobile || "-" }}</p>
				</div>
				<div>
					<label>性别：</label>
					<p>{{ detail.cus_sex == 2 ? "女" : "男" }}</p>
				</div>
				<div>
					<label>来源渠道：</label>
					<p>{{ detail.source_name || "派单系统" }}</p>
				</div>
				<div>
					<label>会员等级：</label>
					<p>{{ detail.cus_grade_name }}</p>
				</div>
				<div>
					<label>所在地：</label>
					<p>{{ detail.new_province + "-" + detail.new_city + "-" + detail.new_area }}</p>
				</div>
				<div>
					<label>详细地址：</label>
					<p>{{ detail.cus_addr || "-" }}</p>
				</div>
				<div>
					<label>生日：</label>
					<p>{{ detail.cus_birthday || "-" }}</p>
				</div>
				<div>
					<label>微信号：</label>
					<p>{{ detail.cus_wx || "-" }}</p>
				</div>
				<div>
					<label>备注：</label>
					<p>{{ detail.remarks || "-" }}</p>
				</div>
			</div>
		</info-item>
		<info-item title="总到店数">
			<div class="info-item__content">
				<div>
					<label>总到店数：</label>
					<p>{{ detail.to_shop || "-" }}</p>
				</div>
				<div>
					<label>最近到店时间：</label>
					<p>{{ detail.last_shop || "-" }}</p>
				</div>
				<div>
					<label>最近消费项目：</label>
					<p>{{ last_shop_data.projects || "-" }}</p>
				</div>
				<div>
					<label>最近消费金额：</label>
					<p>{{ last_shop_data.money || 0 }} 元</p>
				</div>
				<div>
					<label>首次到店时间：</label>
					<p>{{ detail.first_shop || "-" }}</p>
				</div>
				<div>
					<label>首次消费门店：</label>
					<p>{{ first_shop_data.dept_name || "-" }}</p>
				</div>
				<div>
					<label>首次消费项目：</label>
					<p>{{ first_shop_data.projects || "-" }}</p>
				</div>
				<div>
					<label>首次消费金额：</label>
					<p>{{ first_shop_data.money || 0 }} 元</p>
				</div>
			</div>
		</info-item>
		<info-item title="创建信息">
			<div class="info-item__content">
				<div>
					<label>创建时间：</label>
					<p>{{ detail.addtime || "-" }}</p>
				</div>
				<div>
					<label>创建人：</label>
					<p>{{ detail.name_add_op || "-" }}</p>
				</div>
				<div>
					<label>创建部门：</label>
					<p>{{ detail.name_add_dept || "-" }}</p>
				</div>
			</div>
		</info-item>
		<info-item title="归属信息">
			<div class="info-item__content">
				<div>
					<label>所属门店：</label>
					<p>{{ detail.dept_name || "-" }}</p>
				</div>
				<div>
					<label>当前归属人：</label>
					<p>{{ detail.name_ascr_op || "-" }}</p>
				</div>
				<div>
					<label>当前归属部门：</label>
					<p>{{ detail.name_ascr_dept || "-" }}</p>
				</div>
			</div>
		</info-item>
	</div>
</template>
<script>
import womenImg from "@/assets/img/women.png";
import menImg from "@/assets/img/men.png";
export default {
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	components: {
		InfoItem: {
			props: {
				title: String,
				showHeight: {
					type: Number,
					default: 150
				}
			},
			data() {
				return {};
			},
			mounted() {
				this.$refs.readMore && this.$refs.readMore.init();
			},
			render() {
				return (
					<div class="info-item">
						<div class="info-item__title">{this.title}</div>
						<zm-read-more
							ref="readMore"
							show-height={this.showHeight}
							close-text="查看更多">
							{this.$scopedSlots.default()}
						</zm-read-more>
					</div>
				);
			}
		}
	},
	data() {
		return {
			womenImg,
			menImg
		};
	},
	computed: {
		first_shop_data() {
			return this.detail.first_shop_data || {};
		},
		last_shop_data() {
			return this.detail.last_shop_data || {};
		}
	}
};
</script>
<style lang="scss" scoped>
.cus-info {
	height: 100%;
	overflow: auto;
	background: #fff;
	color: #333;
	padding: 0.3rem;
	padding-bottom: 1.5rem;
	box-sizing: border-box;
	font-size: 0.28rem;
}
::v-deep .info-item {
	+ & {
		padding-top: 0.1rem;
	}
	&__title {
		position: relative;
		height: 0.36rem;
		line-height: 0.36rem;
		box-sizing: border-box;
		padding-left: 0.2rem;
		margin-bottom: 0.1rem;
		&::before {
			content: "";
			display: block;
			width: 0.06rem;
			height: 100%;
			background: $primary;
			border-radius: 0.04rem;
			position: absolute;
			left: 0;
			top: 0;
		}
	}
	&__content {
		> div {
			display: flex;
			align-items: center;
			label {
				text-align: right;
				width: 40%;
				color: #666;
			}
			p {
				flex: 1;
				@include ellipsis;
				.avatar {
					text-indent: 0;
				}
			}
		}
	}
}
</style>
